<template>
  <div :id="echarts" ref="echarts" class="echarts" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ['data'],
  computed: {
    echarts() {
      return 'echarts' + (Math.random() * 100000).toFixed(0)
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (JSON.stringify(this.data) !== '{}') {
        this.drawEcharts(this.data)
      }
    })
  },
  watch: {
    data(newValue, oldval) {
      this.drawEcharts(newValue)
    },
  },

  methods: {
    // 基于准备好的dom，初始化echarts实例
    drawEcharts(val) {
      const myChart = echarts.init(document.getElementById(this.echarts))
      myChart.clear()
      let img =
        ''

      // str 虚线圆样式
      let borderdata = []
      for (var i = 0; i < 50; i++) {
        borderdata.push(
          {
            value: 1,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
            },
          },
          {
            value: 1,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: '#2E475F',
                borderWidth: 0,
              },
            },
          },
        )
      }
      // end 虚线圆样式

      let data = [
        {
          name: '席位1',
          value: 78,
        },
        {
          name: '席位2',
          value: 83,
        },
        {
          name: '席位3',
          value: 67,
        },
      ]

      let colorList = [
        {
          c1: '#5084E2',
          c2: '#5084E2',
        },
        {
          c1: '#F47C59',
          c2: '#F47C59',
        },
        {
          c1: '#48D4C4',
          c2: '#48D4C4',
        },
      ]

      let sumValue = getsumValue(data, 'value')
      let optionData = getData(data)

      function getsumValue(array, key) {
        let sum = 0
        for (let i = 0; i < array.length; i++) {
          sum = sum + array[i].value
        }
        return sum
      }

      function getData(data) {
        let res = {
          series: [
            // 内边框
            {
              name: '',
              type: 'pie',
              clockWise: false,
              radius: ['100%', '98%'],
              center: ['50%', '50%'],
              hoverAnimation: false,
              label: {
                show: false,
              },
              hoverAnimation: false,
              animation: false,
              tooltip: {
                show: false,
              },

              data: borderdata,
            },
          ],
          yAxis: [],
          formatter: [],
        }
        for (let i = 1; i <= data.length; i++) {
          res.series.push({
            name: '席位',
            type: 'pie',
            clockWise: true,
            z: 2,
            hoverAnimation: false,
            radius: [110 - i * 15 + '%', 100 - i * 15 + '%'],
            center: ['50%', '50%'],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: colorList[i - 1].c2,
                  },
                  {
                    offset: 1,
                    color: colorList[i - 1].c1,
                  },
                ]),
              },
            },
            data: [
              {
                value: data[i - 1].value,
                name: data[i - 1].name,
              },
              {
                value: sumValue - data[i - 1].value,
                name: '',
                itemStyle: {
                  color: 'rgba(0,0,0,0)',
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                label: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          })
          res.series.push({
            name: '背景线',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: true,
            hoverAnimation: false,
            radius: [110 - i * 15 + '%', 100 - i * 15 + '%'],
            center: ['50%', '50%'],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 5,
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#191C20',
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          })
          res.yAxis.push(data[i - 1].value)
        }
        return res
      }
      myChart.setOption({
        title: {
          text: '指令规范性',
          left: '43%',
          top: '45%',
          textStyle: {
            color: '#fff',
            fontSize: 16,
          },
        },
        grid: {
          top: 5,
          bottom: '75%',
          left: '44%',
          containLabel: false,
        },
        // 图片
        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image: img,
                width: 20,
                height: 20,
              },
              left: '48.5%',
              top: '34%',
            },
          ],
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            z: 3,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: true,
              formatter: (e) => {
                return `${e}%`
              },
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
              show: true,
            },
            data: optionData.yAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: optionData.series,
      })
      window.addEventListener('resize', () => myChart.resize(), false)
    },
  },
}
</script>
<style lang="scss" scoped>
.echarts {
  display: flex;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  justify-content: center;
}
</style>
